<template>
  <div class="order-box">
    <nav-bar>
      <template v-slot:default>我的订单</template>
    </nav-bar>

    <van-tabs ref="tabs" class="order-tab" @click="onChangeTab">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
      <van-tab title="发货"></van-tab>
      <van-tab title="交易完成"></van-tab>
      <van-tab title="过期"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <van-list v-model:loading="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  @offset="10"
        >
          <div class="order-item-box" v-for="(item,index) in list" :key="index" @click="goTo(item.id)">
            <div class="order-item-header">
            <span style="line-height: 30px;">
              订单号：{{ item.order_no }}
              <br>
              创建时间：{{ item.created_at }}
              <br>
            </span>
            </div>
            <van-card v-for="sub in item.orderDetails.data" :key="sub.id"
                      :num="sub.num"
                      :price="sub.price"
                      :desc="sub.goods.description"
                      :title="sub.goods.title"
                      :thumb="sub.goods.cover_url"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import {useRoute, useRouter} from "vue-router";
import NavBar from "../../../components/common/navbar/NavBar";
import {getOrderList} from "../../../network/order";

export default defineComponent({
  name: "Order",
  components: {
    NavBar
  },
  setup() {
    /*
    List 组件通过loading和finished两个变量控制加载状态。
    当组件滚动到底部时，会触发load事件并将loading设置成true。
    此时可以发起异步操作并更新数，数据更新完毕后，将loading设置成false即可。
    若数据已全部加载完毕，则直接将finished设置成true即可。
    */

    const route = useRoute();
    const router = useRouter();
    let tabs = ref(null);
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,//当前页码
      totalPage: 0,//总页数
      status: 0// 订单状态
    });

    // 初始化
    const onRefresh = () => {
      // 是否处于加载状态，加载过程中不触发load事件
      state.refreshing = true;
      //清空列表数据
      state.finished = false;
      // 重新加载数据
      // 将loading设置为true,表示处于加载状态
      state.loading = true;
      state.page = 1;
      onLoad();
    }
    onMounted(() => {
      onRefresh();// 初始化
    });
    const onLoad = () => {
      if (!state.refreshing && state.page < state.totalPage) {
        state.page += 1;
      }
      if (state.refreshing) {
        state.list.length = 0;
        state.refreshing = false;
      }
      loadData();
    }
    // 按页数多次加载
    const loadData = () => {
      let params = {
        page: state.page,
        status: state.status,
        include: 'orderDetails.goods'
      }
      getOrderList(params).then(res => {
        state.list = state.list.concat(res.data);
        state.totalPage= res.meta.pagination.total_pages;
        state.loading = false;
        if (state.page === state.totalPage) {
          state.finished = true;
        }
      })
    }

    // tab切换状态
    const onChangeTab = (name) => {
      state.status = name;
      onRefresh();
    }
    // 点击某个订单跳转到详情
    const goTo = (orderId) => {
      router.push({path: '/orderdetail', query: {orderId}});
    }
    return {
      tabs,
      ...toRefs(state),
      onRefresh,
      onLoad,
      onChangeTab,
      goTo
    }
  }
})
</script>


<style lang="scss" scoped>
.order-box {
  text-align: left;

  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 10px;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    .order-name {
      font-size: 14px;
    }
  }

  .order-tab {
    margin-top: 44px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }


  .content {
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    padding-top: 100px;

  }

  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .van-pull-refresh__head {
      background: #f9f9f9;
    }

    .order-item-box {
      margin: 20px 10px;
      background-color: #FAFAFA;

      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }

      .van-card {
        background-color: #FFFFFF;
        border-radius: 3px;
        margin-top: 10px;
      }
    }
  }
}
</style>
